{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Applying Customization"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import numpy as np\n",
    "import holoviews as hv\n",
    "from holoviews import opts\n",
    "hv.extension('bokeh', 'matplotlib')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As introduced in the [Customization](../getting_started/2-Customization.ipynb) section of the 'Getting Started' guide, HoloViews maintains a strict separation between your content (your data and declarations about your data) and its presentation (the details of how this data is represented visually). This separation is achieved by maintaining sets of keyword values (\"options\") that specify how elements are to appear, stored outside of the element itself. Option keywords can be specified for individual element instances, for all elements of a particular type, or for arbitrary user-defined sets of elements that you give a certain ``group`` and ``label`` (see [Annotating Data](../user_guide/01-Annotating_Data.ipynb)).\n",
    "\n",
    "The options system controls how individual plots appear, but other important settings are made more globally using the \"output\" system, which controls HoloViews plotting and rendering code (see the [Plots and Renderers](Plots_and_Renderers.ipynb) user guide). In this guide we will show how to customize the visual styling with the options and output systems, focusing on the mechanisms rather than the specific choices available (which are covered in other guides such as [Style Mapping](04-Style_Mapping.ipynb))."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Core concepts\n",
    "\n",
    "This section offers an overview of some core concepts for customizing visual representation, focusing on how HoloViews keeps content and presentation separate. To start, we will revisit the simple introductory example in the [Customization](../getting_started/2-Customization.ipynb) getting-started guide (which might be helpful to review first)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "spike_train = pd.read_csv('../assets/spike_train.csv.gz')\n",
    "curve  = hv.Curve(spike_train, 'milliseconds', 'Hertz')\n",
    "spikes = hv.Spikes(spike_train, 'milliseconds', [])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "And now we display the ``curve`` and a ``spikes`` elements together in a layout as we did in the getting-started guide:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "curve  = hv.Curve( spike_train, 'milliseconds', 'Hertz')\n",
    "spikes = hv.Spikes(spike_train, 'milliseconds', [])\n",
    "layout = curve + spikes\n",
    "\n",
    "layout.opts(\n",
    "    opts.Curve( height=200, width=900, xaxis=None, line_width=1.50, color='red', tools=['hover']),\n",
    "    opts.Spikes(height=150, width=900, yaxis=None, line_width=0.25, color='grey')).cols(1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example illustrates a number of key concepts, as described below.\n",
    "\n",
    "### Content versus presentation\n",
    "\n",
    "In the getting-started guide [Introduction](../getting_started/1-Introduction.ipynb), we saw that we can print the string representation of HoloViews objects such as `layout`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "print(layout)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In the [Customization](../getting_started/2-Customization.ipynb) getting-started guide, the `.opts.info()` method was introduced that lets you see the options *associated* with (though not stored on) the objects:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "layout.opts.info()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If you inspect all the state of the `Layout`, `Curve`, or `Spikes` objects you will not find any of these keywords, because they are stored in an entirely separate data structure.  HoloViews assigns a unique ID per HoloViews object that lets arbitrarily specific customization be associated with that object if needed, while also making it simple to define options that apply to entire classes of objects by type (or group and label if defined). The HoloViews element is thus *always* a thin wrapper around your data, without any visual styling information or plotting state, even though it *seems* like the object includes the styling information. This separation between content and presentation is by design, so that you can work with your data and with its presentation entirely independently.\n",
    "\n",
    "If you wish to clear the options that have been associated with an object `obj`, you can call `obj.opts.clear()`.\n",
    "\n",
    "## Option builders\n",
    "\n",
    "The [Customization](../getting_started/2-Customization.ipynb) getting-started guide also introduces the notion of *option builders*. One of the option builders in the visualization shown above is:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "opts.Curve( height=200, width=900, xaxis=None, line_width=1.50, color='red', tools=['hover'])"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "An *option builder* takes a collection of keywords and returns an `Options` object that stores these keywords together. Why should you use option builders and how are they different from a vanilla dictionary?\n",
    "\n",
    "1. The option builder specifies which type of HoloViews object the options are for, which is important because each type accepts different options.\n",
    "2. Knowing the type, the options builder does *validation* against that type for the currently loaded plotting extensions. Try introducing a typo into one of the keywords above; you should get a helpful error message. Separately, try renaming `line_width` to `linewidth`, and you'll get a different message because the latter is a valid matplotlib keyword.\n",
    "3. The option builder allows *tab-completion* in the notebook. This is useful for discovering available keywords for that type of object, which helps prevent mistakes and makes it quicker to specify a set of keywords.\n",
    "\n",
    "In the cell above, the specified options are applicable to `Curve` elements, and different validation and tab completion will be available for other types. \n",
    "\n",
    "The returned `Options` object is different from a dictionary in the following ways:\n",
    "\n",
    "1. An optional *spec* is recorded, where this specification is normally just the element name. Above this is simply 'Curve'. Later, in section [Using `group` and `label`](#Using-group-and-label), we will see how this can also specify the `group` and `label`.\n",
    "2. The keywords are alphanumerically sorted, making it easier to compare `Options` objects."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Inlining options\n",
    "\n",
    "When customizing a single element, the use of an option builder is not mandatory. If you have a small number of keywords that are common (e.g `color`, `cmap`, `title`, `width`, `height`) it can be clearer to inline them into the `.opts` method call if tab-completion and validation isn't required:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "np.random.seed(42)\n",
    "array = np.random.random((10,10))\n",
    "im1 = hv.Image(array).opts(opts.Image(cmap='Reds')) # Using an option builder\n",
    "im2 = hv.Image(array).opts(cmap='Blues')            # Without an option builder\n",
    "im1 + im2"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You cannot inline keywords for composite objects such as `Layout` or `Overlay` objects. For instance, the `layout` object is:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "print(layout)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To customize this layout, you need to use an option builder to associate your keywords with either the `Curve` or the `Spikes` object, or else you would have had to apply the options to the individual elements before you built the composite object. To illustrate setting by type, note that in the first example, both the `Curve` and the `Spikes` have different `height` values provided.\n",
    "\n",
    "You can also target options by the `group` and `label` as described in section on [using `group` and `label`](#Using-group-and-label).\n",
    "\n",
    "## Session-specific options\n",
    "\n",
    "One other common need is to set some options for a Python session, whether using Jupyter notebook or not. For this you can set the default options that will apply to all objects created subsequently:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "opts.defaults(\n",
    "    opts.HeatMap(cmap='Summer', colorbar=True, toolbar='above'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The `opt.defaults` method has now set the style used for all `HeatMap` elements used in this session:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "data = [(chr(65+i), chr(97+j),  i*j) for i in range(5) for j in range(5) if i!=j]\n",
    "heatmap = hv.HeatMap(data).sort()\n",
    "heatmap"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Discovering options\n",
    "\n",
    "Using tab completion in the option builders is one convenient and easy way of discovering the available options for an element. Another approach is to use `hv.help`.\n",
    "\n",
    "For instance, if you run `hv.help(hv.Curve)` you will see a list of the 'style' and 'plot' options applicable to `Curve`. The distinction between these two types of options can often be ignored for most purposes, but the interested reader is encouraged to read more about them in more detail [below](#Split-into-style,-plot-and-norm-options).\n",
    "\n",
    "For the purposes of discovering the available options, the keywords listed under the 'Style Options' section of the help output is worth noting. These keywords are specific to the active plotting extension and are part of the API for that plotting library. For instance, running `hv.help(hv.Curve)` in the cell below would give you the keywords in the Bokeh documentation that you can reference for customizing the appearance of `Curve` objects."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "\n",
    "## Maximizing readability\n",
    "\n",
    "There are many ways to specify options in your code using the above tools, but for creating readable, maintainable code, we recommend making the separation of content and presentation explicit. Someone reading your code can then understand your visualizations in two steps 1) what your data *is* in terms of the applicable elements and containers 2) how this data is to be presented visually.\n",
    "\n",
    "The following guide details the approach we have used through out the examples and guides on holoviews.org. We have found that following these rules makes code involving holoviews easier to read and more consistent.\n",
    "\n",
    "The core principle is as follows: ***avoid mixing declarations of data, elements and containers with details of their visual appearance***.\n",
    "\n",
    "### Two contrasting examples\n",
    "\n",
    "One of the best ways to do this is to declare all your elements, compose them and then apply all the necessary styling with the `.opts` method before the visualization is rendered to disk or to the screen. For instance, the example from the getting-started guide could have been written sub-optimally as follows:\n",
    "\n",
    "***Sub-optimal***\n",
    "```python\n",
    "curve = hv.Curve( spike_train, 'milliseconds', 'Hertz').opts(\n",
    "    height=200, width=900, xaxis=None, line_width=1.50, color='red', tools=['hover'])\n",
    "spikes = hv.Spikes(spike_train, 'milliseconds', vdims=[]).opts(\n",
    "height=150, width=900, yaxis=None, line_width=0.25, color='grey')\n",
    "(curve + spikes).cols(1)\n",
    "```\n",
    "\n",
    "Code like that is very difficult to read because it mixes declarations of the data and its dimensions with details about how to present it.  The recommended version declares the `Layout`, then separately applies all the options together where it's clear that they are just hints for the visualization:\n",
    "\n",
    "***Recommended***\n",
    "```python\n",
    "curve  = hv.Curve( spike_train, 'milliseconds', 'Hertz')\n",
    "spikes = hv.Spikes(spike_train, 'milliseconds', [])\n",
    "layout = curve + spikes\n",
    "\n",
    "layout.opts(\n",
    "    opts.Curve( height=200, width=900, xaxis=None, line_width=1.50, color='red', tools=['hover']),\n",
    "    opts.Spikes(height=150, width=900, yaxis=None, line_width=0.25, color='grey')).cols(1)\n",
    "```\n",
    "\n",
    "\n",
    "By grouping the options in this way and applying them at the end, you can see the definition of `layout` without being distracted by visual concerns declared later. Conversely, you can modify the visual appearance of `layout` easily without needing to know exactly how it was defined. The [coding style guide](#Coding-style-guide) section below offers additional advice for keeping things readable and consistent.\n",
    "\n",
    "### When to use multiple`.opts` calls\n",
    "\n",
    "The above coding style applies in many case, but sometimes you have multiple elements of the same type that you need to distinguish visually. For instance, you may have a set of curves where using the `dim` or `Cycle` objects (described in the [Style Mapping](04-Style_Mapping.ipynb) user guide) is not appropriate and you want to customize the appearance of each curve individually. Alternatively, you may be generating elements in a list comprehension for use in `NdOverlay` and have a specific style to apply to each one.\n",
    "\n",
    "In these situations, it is often appropriate to use the inline style of `.opts` locally. In these instances, it is often best to give the individually styled objects a suitable named handle as illustrated by the  [legend example](../gallery/demos/bokeh/legend_example.ipynb) of the gallery.\n",
    "\n",
    "### General advice\n",
    "\n",
    "As HoloViews is highly compositional by design, you can always build long expressions mixing the data and element declarations, the composition of these elements, and their customization. Even though such expressions can be terse they can also be difficult to read.\n",
    "\n",
    "The simplest way to avoid long expressions is to keep some level of separation between these stages:\n",
    "\n",
    "1. declaration of the data\n",
    "2. declaration of the elements, including `.opts` to distinguish between elements of the same type if necessary \n",
    "3. composition with `+` and `*` into layouts and overlays, and \n",
    "4. customization of the composite object, either with a final call to the `.opts` method, or by declaring such settings as the default for your entire session as described [above](#Session-specific-options).\n",
    "\n",
    "When stages are simple enough, it can be appropriate to combine them. For instance, if the declaration of the data is simple enough, you can fold in the declaration of the element. In general, any expression involving three or more of these stages will benefit from being broken up into several steps.\n",
    "\n",
    "These general principles will help you write more readable code. Maximizing readability will always require some level of judgement, but you can maximize consistency by consulting the [coding style guide](#Coding-style-guide) section for more tips."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Customizing display output\n",
    "\n",
    "\n",
    "The options system controls most of the customizations you might want to do, but there are a few settings that are controlled at a more general level that cuts across all HoloViews object types: the active plotting extension (e.g. Bokeh or Matplotlib), the output display format (PNG, SVG, etc.), the output figure size, and other similar options. The `hv.output` utility allows you to modify these more global settings, either for all subsequent objects or for one particular object:\n",
    "\n",
    "* `hv.output(**kwargs)`: Customize how the output appears for the rest of the notebook session.\n",
    "* `hv.output(obj, **kwargs)`: Temporarily affect the display of an object `obj` using the keyword `**kwargs`.\n",
    "\n",
    "The `hv.output` utility only has an effect in contexts where HoloViews objects can be automatically displayed, which currently is limited to the Jupyter Notebook (in either its classic or JupyterLab variants). In any other Python context, using `hv.output` has no effect, as there is no automatically displayed output; see the [hv.save() and hv.render()](Plots_and_Renderers.ipynb#Saving-and-rendering) utilities for explicitly creating output in those other contexts.\n",
    "\n",
    "To start with `hv.output`, let us define a `Path` object:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "lin = np.linspace(0, np.pi*2, 200)\n",
    "\n",
    "def lissajous(t, a, b, delta):\n",
    "    return (np.sin(a * t + delta), np.sin(b * t), t)\n",
    "\n",
    "path = hv.Path([lissajous(lin, 3, 5, np.pi/2)])\n",
    "path.opts(opts.Path(color='purple', line_width=3, line_dash='dotted'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now, to illustrate, let's use `hv.output` to switch our plotting extension to matplotlib:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "hv.output(backend='matplotlib', fig='svg')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can now display our `path` object with some option customization:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "path.opts(opts.Path(linewidth=2, color='red', linestyle='dotted'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Our plot is now rendered with Matplotlib, in SVG format (try right-clicking the image in the web browser and saving it to disk to confirm). Note that the `opts.Path` option builder now tab completes *Matplotlib* keywords because we activated the Matplotlib plotting extension beforehand. Specifically, `linewidth` and `linestyle` don't exist in Bokeh, where the corresponding options are called `line_width` and `line_dash` instead.\n",
    "\n",
    "You can see the custom output options that are currently active using `hv.output.info()`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "hv.output.info()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The info method will always show which backend is active as well as any other custom settings you have specified. These settings apply to the subsequent display of all objects unless you customize the output display settings for a single object.\n",
    "\n",
    "\n",
    "To illustrate how settings are kept separate, let us switch back to Bokeh in this notebook session:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "hv.output(backend='bokeh')\n",
    "hv.output.info()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "With Bokeh active, we can now declare options on `path` that we want to apply only to matplotlib:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "path = path.opts(\n",
    "    opts.Path(linewidth=3, color='blue', backend='matplotlib'))\n",
    "path"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now we can supply `path` to `hv.output` to customize how it is displayed, while activating matplotlib to generate that display. In the next cell, we render our path at 50% size as an SVG using matplotlib."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "hv.output(path, backend='matplotlib', fig='svg', size=50)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Passing `hv.output` an object will apply the specified settings only for the subsequent display. If you were to view `path` now in the usual way, you would see that it is still being displayed with Bokeh with purple dotted lines.\n",
    "\n",
    "One thing to note is that when we set the options with `backend='matplotlib'`, the active plotting extension was Bokeh. This means that `opts.Path` will tab complete *bokeh* keywords, and not the matplotlib ones that were specified. In practice you will want to set the backend appropriately before building your options settings, to ensure that you get the most appropriate tab completion."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Available `hv.output` settings\n",
    "\n",
    "You can see the available settings using `help(hv.output)`. For reference, here are the most commonly used ones:\n",
    "\n",
    "* **backend**: *The backend used by HoloViews*. If the necessary libraries are installed this can be `'bokeh'`, `'matplotlib'` or `'plotly'`.\n",
    "* **fig** : *The static figure format*. The most common options are `'svg'` and `'png'`.\n",
    "* **holomap**: *The display type for holomaps*. With matplotlib and the necessary support libraries, this may be `'gif'` or `'mp4'`. The JavaScript `'scrubber'` widgets as well as the regular `'widgets'` are always supported.\n",
    "* **fps**: *The frames per second used for animations*. This setting is used for GIF output and by the scrubber widget.\n",
    "* **size**: *The percentage size of displayed output*. Useful for making all display larger or smaller.\n",
    "* **dpi**: *The rendered dpi of the figure*. This setting affects raster output such as PNG images.\n",
    "\n",
    "In `help(hv.output)` you will see a few other, less common settings. The `filename` setting particular is not recommended and will be deprecated in favor of `hv.save` in future."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Coding style guide\n",
    "\n",
    "Using `hv.output` plus option builders with the `.opts` method and `opts.default` covers the functionality required for most HoloViews code written by users. In addition to these recommended tools, HoloViews supports [Notebook Magics](Notebook_Magics.ipynb) (not recommended because they are Jupyter-specific) and literal (nested dictionary) formats useful for developers, as detailed in the [Extending HoloViews](#Extending-HoloViews) section. \n",
    "\n",
    "This section offers further recommendations for how users can structure their code. These are generally tips based on the important principles described in the [maximizing readability](#Maximizing-readability) section that are often helpful but optional.\n",
    "\n",
    "* Use as few `.opts` calls as necessary to style the object the way you want.\n",
    "* You can inline keywords without an option builder if you only have a few common keywords. For instance, `hv.Image(...).opts(cmap='Reds')` is clearer to read than `hv.Image(...).opts(opts.Image(cmap='Reds'))`.\n",
    "* Conversely, you *should* use an option builder if you have more than four keywords.\n",
    "* When you have multiple option builders, it is often clearest to list them on separate lines with a single intentation in both `.opts` and `opts.defaults`:\n",
    "  \n",
    "  **Not recommended**\n",
    "  \n",
    "  `layout.opts(opts.VLine(color='white'), opts.Image(cmap='Reds'), opts.Layout(width=500), opts.Curve(color='blue'))`\n",
    "  \n",
    "  **Recommended**\n",
    "  \n",
    "  `layout.opts(\n",
    "     opts.Curve(color='blue'))\n",
    "     opts.Image(cmap='Reds'),\n",
    "     opts.VLine(color='white'),\n",
    "     opts.Layout(width=500))`\n",
    "     \n",
    "     \n",
    "* The latter is recommended for another reason: if possible, list your element option builders in alphabetical order, before your container option builders in alphabetical order.\n",
    "\n",
    "* Keep the expression before the `.opts` method simple so that the overall expression is readable.\n",
    "* Don't mix `hv.output` and use of the `.opts` method in the same expression."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## What is  `.options`?\n",
    "\n",
    "\n",
    "If you tab complete a HoloViews object, you'll notice there is an `.options` method as well as a `.opts` method. So what is the difference?\n",
    "\n",
    "The `.options` method was introduced in HoloViews 1.10 and was the first time HoloViews allowed users to ignore the distinction between 'style', 'plot' and 'norm' options described in the next section. It is largely equivalent to the `.opts` method except that it applies the options on a returned clone of the object.\n",
    "\n",
    "In other words, you have `clone = obj.options(**kwargs)` where `obj` is unaffected by the keywords supplied while `clone` will be customized. Both `.opts` and `.options` support an explicit `clone` keyword, so:\n",
    "\n",
    "* `obj.opts(**kwargs, clone=True)` is equivalent to `obj.options(**kwargs)`, and conversely\n",
    "* `obj.options(**kwargs, clone=False)` is equivalent to `obj.opts(**kwargs)`\n",
    "\n",
    "For this reason, users only ever need to use `.opts` and occasionally supply `clone=True` if required. The only other difference between these methods is that `.opts` supports the full literal specification that allows splitting into [style, plot and norm options](#Split-into-style,-plot-and-norm-options) (for developers) whereas `.options` does not.\n",
    "\n",
    "## When should I use `clone=True`?\n",
    "\n",
    "The 'Persistent styles' section of the [customization](../getting_started/2-Customization.ipynb) user guide shows how HoloViews remembers options set for an object (per plotting extension). For instance, we never customized the `spikes` object defined at the start of the notebook but we did customize it when it was part of a `Layout` called `layout`. Examining this `spikes` object, we see the options were applied to the underlying object, not just a copy of it in the layout:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "spikes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This is because `clone=False` by default in the `.opts` method. To illustrate `clone=True`, let's view some purple spikes *without* affecting the original `spikes` object:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "purple_spikes = spikes.opts(color='purple', clone=True)\n",
    "purple_spikes"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now if you were to look at `spikes` again, you would see it is still looks like the grey version above and only `purple_spikes` is purple. This means that `clone=True` is useful when you want to keep different styles for some HoloViews object (by making styled clones of it) instead of overwriting the options each time you call `.opts`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Extending HoloViews\n",
    "\n",
    "In addition to the formats described above for use by users, additional option formats are supported that are less user friendly for data exploration but may be more convenient for library authors building on HoloViews.\n",
    "\n",
    "The first of these is the *`Option` list syntax* which is typically most useful outside of notebooks, a *literal syntax* that avoids the need to import `opts`, and then finally a literal syntax that keeps *style* and *plot* options separate."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `Option` list syntax\n",
    "\n",
    "If you find yourself using `obj.opts(*options)` where `options` is a list of `Option` objects, use `obj.opts(options)` instead as list input is also supported:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "options = [\n",
    "    opts.Curve( height=200, width=900, xaxis=None, line_width=1.50, color='grey', tools=['hover']),\n",
    "    opts.Spikes(height=150, width=900, yaxis=None, line_width=0.25, color='orange')]\n",
    "    \n",
    "layout.opts(options).cols(1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This approach is often best in regular Python code where you are dynamically building up a list of options to apply. Using the option builders early also allows for early validation before use in the `.opts` method."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Literal syntax\n",
    "\n",
    "This syntax has the advantage of being a pure Python literal but it is harder to work with directly (due to nested dictionaries), is less readable, lacks tab completion support and lacks validation at the point where the keywords are defined:\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "layout.opts(\n",
    "    {'Curve':  dict(height=200, width=900, xaxis=None, line_width=2, color='blue', tools=['hover']),\n",
    "     'Spikes': dict(height=150, width=900, yaxis=None, line_width=0.25, color='green')}).cols(1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The utility of this format is you don't need to import `opts` and it is easier to dynamically add or remove keywords using Python or if you are storing options in a text file like YAML or JSON and only later applying them in Python code. This format should be avoided when trying to maximize readability or make the available keyword options easy to explore.\n",
    "\n",
    "### Using `group` and `label`\n",
    "\n",
    "The notion of an element `group` and `label` was introduced in [Annotating Data](./01-Annotating_Data.ipynb). This type of metadata is helpful for organizing large collections of elements with shared styling, such as automatically generated objects from some external software (e.g. a simulator). If you have a large set of elements with semantically meaningful `group` and `label` parameters set, you can use this information to appropriately customize large numbers of visualizations at once.\n",
    "\n",
    "To illustrate, here are four overlaid curves where three have the `group` of 'Sinusoid' and one of these also has the label 'Squared':"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "xs = np.linspace(-np.pi,np.pi,100)\n",
    "curve = hv.Curve((xs, xs/3))\n",
    "group_curve1 = hv.Curve((xs, np.sin(xs)), group='Sinusoid')\n",
    "group_curve2 = hv.Curve((xs, np.sin(xs+np.pi/4)), group='Sinusoid')\n",
    "label_curve = hv.Curve((xs, np.sin(xs)**2), group='Sinusoid', label='Squared')\n",
    "curves = curve * group_curve1 * group_curve2 * label_curve\n",
    "curves"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We can now use the `.opts` method to make all curves blue unless they are in the 'Sinusoid' group in which case they are red. Additionally, if a curve in the 'Sinusoid' group also has the label 'Squared', we can make sure that curve is green with a custom interpolation option:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "curves.opts(\n",
    "    opts.Curve(color='blue'),\n",
    "    opts.Curve('Sinusoid', color='red'),\n",
    "    opts.Curve('Sinusoid.Squared', interpolation='steps-mid', color='green'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By using `opts.defaults` instead of the `.opts` method, we can use this type of customization to apply options to many elements, including elements that haven't even been created yet. For instance, if we run:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "opts.defaults(opts.Area('Error', alpha=0.5, color='grey'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Then any `Area` element with a `group` of 'Error' will then be displayed as a semi-transparent grey:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "X  = np.linspace(0,2,10)\n",
    "hv.Area((X, np.random.rand(10), -np.random.rand(10)), vdims=['y', 'y2'], group='Error')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Split into `style`, `plot` and `norm` options\n",
    "\n",
    "In `HoloViews`, an element such as `Curve` actually has three semantic distinct categories of options: `style`, `plot`, and `norm` options. Normally, a user doesn't need to worry about the distinction if they spend most of their time working with a single plotting extension.\n",
    "\n",
    "When trying to build a system that consistently needs to generate visualizations across different plotting libraries, it can be useful to make this distinction explicit:\n",
    "\n",
    "##### ``style`` options:\n",
    "\n",
    "``style`` options are passed directly to the underlying rendering backend that actually draws the plots, allowing you to control the details of how it behaves.  Each backend has its own options (e.g. the [``bokeh``](Bokeh_Backend) or plotly backends).\n",
    "\n",
    "For whichever backend has been selected, HoloViews can tell you which options are supported, but you will need to read the corresponding documentation (e.g. [matplotlib](http://matplotlib.org/contents.html), [bokeh](http://bokeh.pydata.org)) for the details of their use. For listing available options, see the ``hv.help`` as described in the [Discovering options](#Discovering-options) section.\n",
    "\n",
    "HoloViews has been designed to be easily extensible to additional backends in the future and each backend would have its own set of style options.\n",
    "\n",
    "##### ``plot`` options:\n",
    "\n",
    "Each of the various HoloViews plotting classes declares various [Parameters](http://param.pyviz.org) that control how HoloViews builds the visualization for that type of object, such as plot sizes and labels.  HoloViews uses these options internally; they are not simply passed to the underlying backend.  HoloViews documents these options fully in its online help and in the [Reference Manual](http://holoviews.org/Reference_Manual).  These options may vary for different backends in some cases, depending on the support available both in that library and in the HoloViews interface to it, but we try to keep any options that are meaningful for a variety of backends the same for all of them. For listing available options, see the output of ``hv.help``.\n",
    "\n",
    "##### ``norm`` options:\n",
    "\n",
    "``norm`` options are a special type of plot option that are applied orthogonally to the above two types, to control normalization.  Normalization refers to adjusting the properties of one plot relative to those of another.  For instance, two images normalized together would appear with relative brightness levels, with the brightest image using the full range black to white, while the other image is scaled proportionally.  Two images normalized independently would both cover the full range from black to white.  Similarly, two axis ranges normalized together will expand to fit the largest range of either axis, while those normalized separately would cover different ranges. For listing available options, see the output of ``hv.help``.\n",
    "\n",
    "\n",
    "You can preserve the semantic distinction between these types of option in an augmented form of the [Literal syntax](#Literal-syntax) as follows:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "full_literal_spec = {\n",
    "    'Curve': {'style':dict(color='orange')}, \n",
    "    'Curve.Sinusoid': {'style':dict(color='grey')}, \n",
    "    'Curve.Sinusoid.Squared': {'style':dict(color='black'),\n",
    "                                'plot':dict(interpolation='steps-mid')}}\n",
    "curves.opts(full_literal_spec)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This specification is what HoloViews uses internally, but it is awkward for people to use and is not ever recommended for normal users. That said, it does offer the maximal amount of flexibility and power for integration with other software.\n",
    "\n",
    "For instance, a simulator that can output visualization using either Bokeh or Matplotlib via HoloViews could use this format. By keeping the 'plot' and 'style' options separate, the 'plot' options could be set regardless of the plotting library while the 'style' options would be conditional on the backend."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Onwards\n",
    "\n",
    "This section of the user guide has described how you can discover and set customization options in HoloViews. Using `hv.help` and the option builders, you should be able to find the options available for any given object you want to display.\n",
    "\n",
    "What *hasn't* been explored are some of the facilities HoloViews offers to map the dimensions of your data to style options. This important topic is explored in the next user guide [Style Mapping](04-Style_Mapping.ipynb), where you will learn of the `dim` object as well as about the `Cycle` and `Palette` objects."
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}
